"use client"

import { useState } from "react"
import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native"
import { theme } from "../../constants/theme"
import PhoneticDetailSheet from "./PhoneticDetailSheet"

// 字母数据
const LETTER_DATA = [
    {
        letter: "a",
        totalPronunciations: 9,
        phoneticSymbols: [
            { symbol: "ə", frequency: 258 },
            { symbol: "æ", frequency: 410 },
            { symbol: "eɪ", frequency: 97 },
            { symbol: "ɑː", frequency: 64 },
            { symbol: "ɔː", frequency: 29 },
            { symbol: "e", frequency: 8 },
            { symbol: "ɪ", frequency: 18 },
            { symbol: "eə", frequency: 6 },
            { symbol: "ʊ", frequency: 13 },
        ],
        examples: [
            {
                word: "a",
                phonetic: "ə",
                partOfSpeech: "art",
                meaning: "一(个)",
                targetLetter: "a",
            },
            {
                word: "ago",
                phonetic: "əˈɡəʊ",
                partOfSpeech: "adv",
                meaning: "以前",
                targetLetter: "a",
            },
            {
                word: "era",
                phonetic: "ɪərə",
                partOfSpeech: "n",
                meaning: "时代; 纪元",
                targetLetter: "a",
            },
            {
                word: "soda",
                phonetic: "səʊdə",
                partOfSpeech: "n",
                meaning: "苏打; 苏打水",
                targetLetter: "a",
            },
            {
                word: "sofa",
                phonetic: "səʊfə",
                partOfSpeech: "n",
                meaning: "沙发",
                targetLetter: "a",
            },
            {
                word: "away",
                phonetic: "əˈweɪ",
                partOfSpeech: "adv",
                meaning: "离开; 远离; 在远处",
                targetLetter: "a",
            },
            {
                word: "visa",
                phonetic: "viːzə",
                partOfSpeech: "n",
                meaning: "签证",
                targetLetter: "a",
            },
        ],
    },
    {
        letter: "e",
        totalPronunciations: 6,
        phoneticSymbols: [
            { symbol: "e", frequency: 320 },
            { symbol: "i", frequency: 180 },
            { symbol: "ə", frequency: 150 },
            { symbol: "ɪə", frequency: 45 },
            { symbol: "ɜː", frequency: 30 },
            { symbol: "eɪ", frequency: 25 },
        ],
        examples: [
            {
                word: "bed",
                phonetic: "bed",
                partOfSpeech: "n",
                meaning: "床",
                targetLetter: "e",
            },
            {
                word: "me",
                phonetic: "miː",
                partOfSpeech: "pron",
                meaning: "我",
                targetLetter: "e",
            },
        ],
    },
    {
        letter: "i",
        totalPronunciations: 4,
        phoneticSymbols: [
            { symbol: "ɪ", frequency: 280 },
            { symbol: "aɪ", frequency: 210 },
            { symbol: "i", frequency: 120 },
            { symbol: "ə", frequency: 40 },
        ],
        examples: [
            {
                word: "big",
                phonetic: "bɪɡ",
                partOfSpeech: "adj",
                meaning: "大的",
                targetLetter: "i",
            },
            {
                word: "time",
                phonetic: "taɪm",
                partOfSpeech: "n",
                meaning: "时间",
                targetLetter: "i",
            },
        ],
    },
    {
        letter: "o",
        totalPronunciations: 5,
        phoneticSymbols: [
            { symbol: "ɒ", frequency: 240 },
            { symbol: "əʊ", frequency: 190 },
            { symbol: "ʌ", frequency: 85 },
            { symbol: "ə", frequency: 65 },
            { symbol: "ɔː", frequency: 50 },
        ],
        examples: [],
    },
    {
        letter: "u",
        totalPronunciations: 4,
        phoneticSymbols: [
            { symbol: "ʌ", frequency: 180 },
            { symbol: "ʊ", frequency: 150 },
            { symbol: "juː", frequency: 120 },
            { symbol: "ə", frequency: 30 },
        ],
        examples: [],
    },
    {
        letter: "y",
        totalPronunciations: 3,
        phoneticSymbols: [
            { symbol: "ɪ", frequency: 120 },
            { symbol: "aɪ", frequency: 90 },
            { symbol: "j", frequency: 60 },
        ],
        examples: [],
    },
]

// 元音分组数据
const VOWEL_GROUPS = {
    a: [
        {
            symbol: "eɪ",
            description: "在重读开音节中通常发(字母本音)双元音[eɪ]",
            examples: ["take", "gate", "late", "space"],
        },
        {
            symbol: "æ",
            description: "在重读闭音节中通常发短元音[æ]",
            examples: ["bat", "map", "sand", "pack"],
        },
        {
            symbol: "ɑː",
            description: "在[s,th,f,h]间面通常发长元音[ɑː]",
            examples: ["pass", "last", "ask", "bath", "after", "plant"],
        },
        {
            symbol: "ə",
            description: "在非重读音节(弱读音节)中通常发短元音[ə]",
            examples: ["about", "sofa", "china"],
        },
        {
            symbol: "ɒ",
            description: "在[w,wh,qu]后面通常发短元音[ɒ]",
            examples: ["want", "wash", "swap", "what", "quality"],
        },
    ],
    e: [
        {
            symbol: "iː",
            description: "在重读开音节中通常发长元音[iː]",
            examples: ["me", "these", "complete"],
        },
        {
            symbol: "e",
            description: "在重读闭音节中通常发短元音[e]",
            examples: ["bed", "let", "when"],
        },
    ],
    i: [
        {
            symbol: "aɪ",
            description: "在重读开音节中通常发双元音[aɪ]",
            examples: ["time", "like", "fine"],
        },
        {
            symbol: "ɪ",
            description: "在重读闭音节中通常发短元音[ɪ]",
            examples: ["sit", "big", "fish"],
        },
    ],
}

export default function BasicVowelsTab() {
    const [selectedLetter, setSelectedLetter] = useState<string | null>(null)
    const [selectedLetterData, setSelectedLetterData] = useState<any>(null)

    const handleLetterPress = (letter: string) => {
        setSelectedLetter(letter)
        const letterData = LETTER_DATA.find((item) => item.letter === letter)
        setSelectedLetterData(letterData)
    }

    const playAudio = (word: string) => {
        // Simulate audio playback
        console.log(`Playing audio for: ${word}`)
    }

    return (
        <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
            {/* Letter Grid */}
            <View style={styles.letterGrid}>
                {LETTER_DATA.map((item, index) => (
                    <TouchableOpacity
                        key={index}
                        style={styles.letterItem}
                        onPress={() => handleLetterPress(item.letter)}
                        activeOpacity={0.7}
                    >
                        <Text style={styles.letterText}>{item.letter}</Text>
                        <Text style={styles.letterCount}>{item.totalPronunciations}</Text>
                    </TouchableOpacity>
                ))}
            </View>

            {/* Vowel Groups */}
            {Object.entries(VOWEL_GROUPS).map(([letter, items]) => (
                <View key={letter} style={styles.group}>
                    <Text style={styles.groupTitle}>字母 {letter}</Text>
                    {items.map((item, index) => (
                        <View key={index} style={styles.phoneticItem}>
                            <View style={styles.symbolContainer}>
                                <Text style={styles.symbol}>[{item.symbol}]</Text>
                            </View>
                            <View style={styles.contentContainer}>
                                <Text style={styles.description}>{item.description}</Text>
                                <View style={styles.examplesContainer}>
                                    {item.examples.map((word, wordIndex) => (
                                        <TouchableOpacity key={wordIndex} style={styles.wordButton} onPress={() => playAudio(word)}>
                                            <Text style={styles.wordText}>{word}</Text>
                                        </TouchableOpacity>
                                    ))}
                                </View>
                            </View>
                        </View>
                    ))}
                </View>
            ))}

            <PhoneticDetailSheet
                visible={!!selectedLetter}
                onClose={() => {
                    setSelectedLetter(null)
                    setSelectedLetterData(null)
                }}
                letter={selectedLetter || ""}
                phoneticData={selectedLetterData}
            />
        </ScrollView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    letterGrid: {
        flexDirection: "row",
        flexWrap: "wrap",
        padding: theme.spacing.md,
        gap: theme.spacing.sm,
    },
    letterItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.sm,
        width: "30%",
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    letterText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    letterCount: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.primary.default,
        opacity: 0.7,
    },
    group: {
        marginBottom: theme.spacing.md,
        paddingHorizontal: theme.spacing.md,
    },
    groupTitle: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.sm,
    },
    phoneticItem: {
        flexDirection: "row",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        marginBottom: theme.spacing.sm,
        padding: theme.spacing.md,
        shadowColor: "rgba(0,0,0,0.1)",
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.5,
        shadowRadius: 4,
        elevation: 2,
    },
    symbolContainer: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    symbol: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.primary.default,
    },
    contentContainer: {
        flex: 1,
    },
    description: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.xs,
    },
    examplesContainer: {
        flexDirection: "row",
        flexWrap: "wrap",
        gap: theme.spacing.xs,
    },
    wordButton: {
        backgroundColor: "rgba(91, 142, 244, 0.05)",
        paddingHorizontal: theme.spacing.sm,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
    },
    wordText: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.black,
    },
})

